
<title></title>
<meta charset="utf-8" />
<link rel="stylesheet" href="../../assets/css/jquery-ui.min.css" />
<link rel="stylesheet" href="../../assets/css/ui.jqgrid.css" />

<!-- ajax layout which only needs content area -->
<div class="page-header">
	<h1>
		单词小测验 
	</h1>
</div>
<!-- /.page-header -->

<div class="row">
	<div class="col-xs-12">
		<!-- PAGE CONTENT BEGINS -->
		<div class="well well-sm">
			<button class="btn btn-primary" onclick="createFreeQuizSimple()">自由选题(简单版)</button>
			<button class="btn btn-primary" onclick="createFreeQuiz()">自由选题</button>
			<button class="btn btn-primary" onclick="createCustomQuiz()">自定义题目</button>
		</div>

		<table id="grid-table"></table>

		<div id="grid-pager"></div>

		<script type="text/javascript">
			var $path_base = "../..";//in Ace demo this will be used for editurl parameter
		</script>

		<!-- PAGE CONTENT ENDS -->
	</div>
	<!-- /.col -->
</div>
<!-- /.row -->

<!-- page specific plugin scripts -->
<script type="text/javascript">
	function createFreeQuizSimple() {
		window.location = "ajax.html#page/freeQuizSimple";
	}
	function createFreeQuiz() {
		window.location = "ajax.html#page/freeQuiz";
	}
	function createCustomQuiz() {
		window.location = "ajax.html#page/newQuiz";
	}

	var scripts = [ null,
			"../../assets/js/jqGrid/jquery.jqGrid.min.js",
			"../../assets/js/jqGrid/i18n/grid.locale-en.js",
			"../../assets/js/bootbox.min.js", null ]
	ace
			.load_ajax_scripts(
					scripts,
					function() {
						//inline scripts related to this page

						jQuery(function($) {
							var grid_selector = "#grid-table";
							var pager_selector = "#grid-pager";

							//resize to fit page size
							$(window).on(
									'resize.jqGrid',
									function() {
										$(grid_selector).jqGrid('setGridWidth',
												$(".page-content").width());
									})
							//resize on sidebar collapse/expand
							var parent_column = $(grid_selector).closest(
									'[class*="col-"]');
							$(document)
									.on(
											'settings.ace.jqGrid',
											function(ev, event_name, collapsed) {
												if (event_name === 'sidebar_collapsed'
														|| event_name === 'main_container_fixed') {
													//setTimeout is for webkit only to give time for DOM changes and then redraw!!!
													setTimeout(
															function() {
																$(grid_selector)
																		.jqGrid(
																				'setGridWidth',
																				parent_column
																						.width());
															}, 0);
												}
											})

							jQuery(grid_selector).jqGrid({
								datatype : "json",
								url : "../../getQuizList",
								height : 400,
								colNames : [ 'ID', '名称', '得分', '操作', 'psw' ],
								colModel : [ {
									name : 'id',
									index : 'id',
									width : 60,
									sorttype : "int",
									editable : false
								}, {
									name : 'name',
									index : 'name',
									width : 150,
									editable : true,
									editoptions : {
										size : "20",
										maxlength : "100"
									}
								},

								// 				{name:'remark',index:'remark', width:150, sortable:false,editable: true,edittype:"textarea", editoptions:{rows:"2",cols:"10"}} ,
								// 				{name:'author.name',index:'author.name', width:150, sortable:true,editable: false} ,
								{
									name : 'rate',
									index : 'rate',
									sortable : false,
									width : 90
								},{
									name : 'act',
									index : 'act',
									sortable : false,
									width : 90
								},{
									name : 'password',
									index : 'password',
									hidden : true,
									editable : false
								} ],

								viewrecords : true,
								rowNum : 30,
								rowList : [ 10, 20, 30 ],
								pager : pager_selector,
								altRows : true,
								//toppager: true,

								multiselect : true,
								//multikey: "ctrlKey",
								multiboxonly : true,

								loadComplete : function() {
									var table = this;
									setTimeout(function() {
										styleCheckbox(table);

										updateActionIcons(table);
										updatePagerIcons(table);
										enableTooltips(table);
									}, 0);
								},
								
								gridComplete : function() {
									var ids = jQuery("#grid-table")
											.jqGrid('getDataIDs');
									// alert("ids:" + ids);
									for (var i = 0; i < ids.length; i++) {
										var cl = ids[i];
										var rowData = jQuery("#grid-table").getRowData(cl);
										console.log("#rowData:" + rowData.password);
										viewBtnHtml = "<input  type='button' class='btn btn-info' value='查看' onclick=\"viewQuiz('"
												+ cl + "', '" + rowData.password + "');\"  />";
										rateHtml = "<span name='rateSpan' id='" + cl + "'></span>";
										jQuery("#grid-table").jqGrid(
												'setRowData',
												ids[i],
												{
													act : viewBtnHtml,
													rate : rateHtml
												});
									}
									
									var rateSpans = $("span[name=rateSpan]");
									for(var i = 0; i < rateSpans.length; i++) {
										var oneRateSpan = $(rateSpans[i]); 
										var quizId = oneRateSpan.attr("id");
										console.log("quizId:" + quizId);
										$.ajax({
											type : "POST",
											url : "../../getRateForQuiz",
											data : {
												qId : quizId 
											},
											async : false,
											dataType : "text",
											success : function(data) {
												console.log("data:" + data);
												oneRateSpan.html(toDecimal(data));
											},
											error : function(data) {
												alert("set error, please contact administrator");
											}

										});
									}
								},
								

								editurl : "/addOrUpdateArticle",//nothing is saved
								caption : "测验列表"

							//,autowidth: true,

							/**
							,
							grouping:true, 
							groupingView : { 
								 groupField : ['name'],
								 groupDataSorted : true,
								 plusicon : 'fa fa-chevron-down bigger-110',
								 minusicon : 'fa fa-chevron-up bigger-110'
							},
							caption: "Grouping"
							 */

							});
							$(window).triggerHandler('resize.jqGrid');//trigger window resize to make the grid get the correct size

							//enable search/filter toolbar
							//jQuery(grid_selector).jqGrid('filterToolbar',{defaultSearch:true,stringResult:true})
							//jQuery(grid_selector).filterToolbar({});

							function UploadImage(response, postdata) {
								alert("UploadImage");
								var data = $.parseJSON(response.responseText);

								if (data.success == true) {
									if ($("#fileToUpload").val() != "") {
										ajaxFileUpload(data.id);
									}
								}

								return [ data.success, data.message, data.id ];
							}

							function ajaxFileUpload(id) {
								$("#loading").ajaxStart(function() {
									$(this).show();
								}).ajaxComplete(function() {
									$(this).hide();
								});

								$
										.ajaxFileUpload({
											url : '@Url.Action("UploadImage")',
											secureuri : false,
											fileElementId : 'fileToUpload',
											dataType : 'json',
											data : {
												id : id
											},
											success : function(data, status) {

												if (typeof (data.success) != 'undefined') {
													if (data.success == true) {
														return;
													} else {
														alert(data.message);
													}
												} else {
													return alert('Failed to upload logo!');
												}
											},
											error : function(data, status, e) {
												return alert('Failed to upload logo!');
											}
										})
							}

							//switch element when editing inline
							function aceSwitch(cellvalue, options, cell) {
								setTimeout(
										function() {
											$(cell)
													.find(
															'input[type=checkbox]')
													.addClass(
															'ace ace-switch ace-switch-5')
													.after(
															'<span class="lbl"></span>');
										}, 0);
							}
							//enable datepicker
							function pickDate(cellvalue, options, cell) {
								setTimeout(function() {
									$(cell).find('input[type=text]')
											.datepicker({
												format : 'yyyy-mm-dd',
												autoclose : true
											});
								}, 0);
							}

							//navButtons
							jQuery(grid_selector)
									.jqGrid(
											'navGrid',
											pager_selector,
											{ //navbar options
												edit : true,
												editicon : 'ace-icon fa fa-pencil blue',
												add : true,
												addicon : 'ace-icon fa fa-plus-circle purple',
												del : true,
												delicon : 'ace-icon fa fa-trash-o red',
												search : true,
												searchicon : 'ace-icon fa fa-search orange',
												refresh : true,
												refreshicon : 'ace-icon fa fa-refresh green',
												view : true,
												viewicon : 'ace-icon fa fa-search-plus grey',
											},
											{
												//edit record form
												//closeAfterEdit: true,
												//width: 700,
												recreateForm : true,
												beforeShowForm : function(e) {
													var form = $(e[0]);
													form
															.closest(
																	'.ui-jqdialog')
															.find(
																	'.ui-jqdialog-titlebar')
															.wrapInner(
																	'<div class="widget-header" />')
													style_edit_form(form);
												}
											},
											{
												//new record form
												//width: 700,
												closeAfterAdd : true,
												recreateForm : true,
												viewPagerButtons : false,
												beforeShowForm : function(e) {
													var form = $(e[0]);
													form
															.closest(
																	'.ui-jqdialog')
															.find(
																	'.ui-jqdialog-titlebar')
															.wrapInner(
																	'<div class="widget-header" />')
													style_edit_form(form);
												}
											},
											{
												//delete record form
												recreateForm : true,
												beforeShowForm : function(e) {
													var form = $(e[0]);
													if (form.data('styled'))
														return false;

													form
															.closest(
																	'.ui-jqdialog')
															.find(
																	'.ui-jqdialog-titlebar')
															.wrapInner(
																	'<div class="widget-header" />')
													style_delete_form(form);

													form.data('styled', true);
												},
												onClick : function(e) {
													alert(1);
												}
											},
											{
												//search form
												recreateForm : true,
												afterShowSearch : function(e) {
													var form = $(e[0]);
													form
															.closest(
																	'.ui-jqdialog')
															.find(
																	'.ui-jqdialog-title')
															.wrap(
																	'<div class="widget-header" />')
													style_search_form(form);
												},
												afterRedraw : function() {
													style_search_filters($(this));
												},
												multipleSearch : true,
											/**
											multipleGroup:true,
											showQuery: true
											 */
											},
											{
												//view record form
												recreateForm : true,
												beforeShowForm : function(e) {
													var form = $(e[0]);
													form
															.closest(
																	'.ui-jqdialog')
															.find(
																	'.ui-jqdialog-title')
															.wrap(
																	'<div class="widget-header" />')
												}
											},
											{
												afterSubmit : function(
														response, postdata) {
													alert("here");
													return [
															false,
															response.responseText,
															"" ];
												}
											})

							function style_edit_form(form) {
								//enable datepicker on "sdate" field and switches for "stock" field
								form.find('input[name=sdate]').datepicker({
									format : 'yyyy-mm-dd',
									autoclose : true
								}).end().find('input[name=stock]').addClass(
										'ace ace-switch ace-switch-5').after(
										'<span class="lbl"></span>');
								//don't wrap inside a label element, the checkbox value won't be submitted (POST'ed)
								//.addClass('ace ace-switch ace-switch-5').wrap('<label class="inline" />').after('<span class="lbl"></span>');

								//update buttons classes
								var buttons = form.next().find(
										'.EditButton .fm-button');
								buttons.addClass('btn btn-sm').find(
										'[class*="-icon"]').hide();//ui-icon, s-icon
								buttons.eq(0).addClass('btn-primary').prepend(
										'<i class="ace-icon fa fa-check"></i>');
								buttons.eq(1).prepend(
										'<i class="ace-icon fa fa-times"></i>')

								buttons = form.next().find('.navButton a');
								buttons.find('.ui-icon').hide();
								buttons
										.eq(0)
										.append(
												'<i class="ace-icon fa fa-chevron-left"></i>');
								buttons
										.eq(1)
										.append(
												'<i class="ace-icon fa fa-chevron-right"></i>');
							}

							function style_delete_form(form) {
								var buttons = form.next().find(
										'.EditButton .fm-button');
								buttons.addClass(
										'btn btn-sm btn-white btn-round').find(
										'[class*="-icon"]').hide();//ui-icon, s-icon
								buttons
										.eq(0)
										.addClass('btn-danger')
										.prepend(
												'<i class="ace-icon fa fa-trash-o"></i>');
								buttons.eq(1).addClass('btn-default').prepend(
										'<i class="ace-icon fa fa-times"></i>')
							}

							function style_search_filters(form) {
								form.find('.delete-rule').val('X');
								form.find('.add-rule').addClass(
										'btn btn-xs btn-primary');
								form.find('.add-group').addClass(
										'btn btn-xs btn-success');
								form.find('.delete-group').addClass(
										'btn btn-xs btn-danger');
							}
							function style_search_form(form) {
								var dialog = form.closest('.ui-jqdialog');
								var buttons = dialog.find('.EditTable')
								buttons.find('.EditButton a[id*="_reset"]')
										.addClass('btn btn-sm btn-info').find(
												'.ui-icon').attr('class',
												'ace-icon fa fa-retweet');
								buttons.find('.EditButton a[id*="_query"]')
										.addClass('btn btn-sm btn-inverse')
										.find('.ui-icon').attr('class',
												'ace-icon fa fa-comment-o');
								buttons.find('.EditButton a[id*="_search"]')
										.addClass('btn btn-sm btn-purple')
										.find('.ui-icon').attr('class',
												'ace-icon fa fa-search');
							}

							function beforeDeleteCallback(e) {
								var form = $(e[0]);
								if (form.data('styled'))
									return false;

								form.closest('.ui-jqdialog').find(
										'.ui-jqdialog-titlebar').wrapInner(
										'<div class="widget-header" />')
								style_delete_form(form);

								form.data('styled', true);
							}

							function beforeEditCallback(e) {
								var form = $(e[0]);
								form.closest('.ui-jqdialog').find(
										'.ui-jqdialog-titlebar').wrapInner(
										'<div class="widget-header" />')
								style_edit_form(form);
							}

							//it causes some flicker when reloading or navigating grid
							//it may be possible to have some custom formatter to do this as the grid is being created to prevent this
							//or go back to default browser checkbox styles for the grid
							function styleCheckbox(table) {
								/**
									$(table).find('input:checkbox').addClass('ace')
									.wrap('<label />')
									.after('<span class="lbl align-top" />')
								
								
									$('.ui-jqgrid-labels th[id*="_cb"]:first-child')
									.find('input.cbox[type=checkbox]').addClass('ace')
									.wrap('<label />').after('<span class="lbl align-top" />');
								 */
							}

							//unlike navButtons icons, action icons in rows seem to be hard-coded
							//you can change them like this in here if you want
							function updateActionIcons(table) {
								/**
								var replacement = 
								{
									'ui-ace-icon fa fa-pencil' : 'ace-icon fa fa-pencil blue',
									'ui-ace-icon fa fa-trash-o' : 'ace-icon fa fa-trash-o red',
									'ui-icon-disk' : 'ace-icon fa fa-check green',
									'ui-icon-cancel' : 'ace-icon fa fa-times red'
								};
								$(table).find('.ui-pg-div span.ui-icon').each(function(){
									var icon = $(this);
									var $class = $.trim(icon.attr('class').replace('ui-icon', ''));
									if($class in replacement) icon.attr('class', 'ui-icon '+replacement[$class]);
								})
								 */
							}

							//replace icons with FontAwesome icons like above
							function updatePagerIcons(table) {
								var replacement = {
									'ui-icon-seek-first' : 'ace-icon fa fa-angle-double-left bigger-140',
									'ui-icon-seek-prev' : 'ace-icon fa fa-angle-left bigger-140',
									'ui-icon-seek-next' : 'ace-icon fa fa-angle-right bigger-140',
									'ui-icon-seek-end' : 'ace-icon fa fa-angle-double-right bigger-140'
								};
								$(
										'.ui-pg-table:not(.navtable) > tbody > tr > .ui-pg-button > .ui-icon')
										.each(
												function() {
													var icon = $(this);
													var $class = $.trim(icon
															.attr('class')
															.replace('ui-icon',
																	''));

													if ($class in replacement)
														icon
																.attr(
																		'class',
																		'ui-icon '
																				+ replacement[$class]);
												})
							}

							function enableTooltips(table) {
								$('.navtable .ui-pg-button').tooltip({
									container : 'body'
								});
								$(table).find('.ui-pg-div').tooltip({
									container : 'body'
								});
							}
						
							//var selr = jQuery(grid_selector).jqGrid('getGridParam','selrow');

							$(document).on('ajaxloadstart', function(e) {
								$(grid_selector).jqGrid('GridUnload');
								$('.ui-jqdialog').remove();
							});
						});
					});
	
	
	function viewQuiz(qId, psw) {
		if(psw != "") {
			bootbox.prompt("请输入密码:", function(result) {
				if (result === null) {
					
				} else {
					//console.log("qId:" + qId);
					window.location = "ajax.html?password=" + result + "&qid=" + qId + "#page/freeQuiz";
				}
			});
		} else {
			window.location = "ajax.html?qid=" + qId + "#page/freeQuiz";
		}
	}
	
	

</script>

